<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.4.1.js"></script>
		<style>
			.move{
				position: relative;
				top: 100px;
				left: 50px;
			}
			.change{
				background-color: black;
			}
		</style>
		<script>
			function fun(){
				$("body").toggleClass("change");
			}
		</script>
	</head>
	<body>
		<button onclick="fun()">开关灯</button><br />
		<img id="img" src="img/timg.jpg" style="width: 200px;"/>
		<script>
			var i = document.getElementById("img");
			var j = $("#img");
			
			//1.获得CSS样式的属性值
			console.log(i.style.width);
			console.log(j.css("width"));
			//2.设置CSS样式的值
			i.style.width = "300px";
			j.css("width","400px");
			// j.css({
			// 	"top":"100px",
			// 	"left":"50px",
			// 	"position":"relative"
			// });
			//3.添加class
			j.addClass("move");
			//j.removeClass("move");
			console.log(i.style.top);
			console.log(j.css("top"));
		</script>
	</body>
</html>
